// src/components/QuestionEditor/SingleChoice.jsx
import React from 'react';
import { Input, Button, Space } from 'antd';

const SingleChoice = ({ question, updateQuestion }) => {
  //进行选项的更新，传入想要修改的选项的下标和文本框的输入值
  const handleOptionChange = (index, value) => {
    const newOptions = [...question.options];
    newOptions[index] = value;
    updateQuestion({ ...question, options: newOptions });
  };

  const addOption = () => {
    updateQuestion({
      ...question,
      options: [...question.options, ``]
    });
  };

  const removeOption = (index) => {
    const newOptions = question.options.filter((_, i) => i !== index);
    updateQuestion({ ...question, options: newOptions });
  };

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      {/*进行选项的渲染*/}
      {question.options.map((option, index) => (
        <Space key={index} style={{ display: 'flex', marginBottom: 8 }}>
          <Input
            value={option}
            onChange={(e) => handleOptionChange(index, e.target.value)}
            style={{ width: 300 }}
          />
          <Button danger onClick={() => removeOption(index)}>删除</Button>
        </Space>
      ))}
      <Button onClick={addOption}>添加选项</Button>
    </Space>
  );
};

export default SingleChoice;